<template>
  <div id="gamelist">
    <com-head>{{headmes}}</com-head>
    <div class="gamelist" v-for="(item,index) in message" @click="recommes(item.id,item.user_id,item.info_price)" :key="index">
        <div class="gametop">
            <div class="left">
                <div class="box1"><img :src="item.expert_img"></div>
                <div class="box2">{{item.user_name}}</div>
                <div class="box3">{{item.position}}</div>
            </div>
            <div class="right">{{item.info_price}}</div>
        </div>
        <div class="gamecenter">{{item.name}}&emsp;{{item.begin_time}}</div>
        <div class="gamecon">
            <div class="box1">{{item.main_team}}<span>&nbsp;(主)</span> </div>
            <div class="box2">vs</div>
            <div class="box3">{{item.team}}</div>
        </div>
        <div class="gamecenter title">标题：{{item.title}}</div>
    </div>
    <com-foot :select="5"></com-foot>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  name: "gamelist",
  data() {
    return {
      status: this.$route.query.status,
      headmes: "足球",
      message: []
    };
  },
  created: function() {
    if (parseInt(this.status) === 1) {
      this.headmes = "足球";
      // 请求足球
      this.loadmes1();
    } else if (parseInt(this.status) === 2) {
      this.headmes = "篮球";
      // 请求篮球
      this.loadmes2();
    } else if (parseInt(this.status) === 3) {
      this.headmes = "精品推荐";
      // 请求精品推荐
      this.loadmes3();
    }
  },
  methods: {
    loadmes1() {
      this.axios
        .post("Ball/zuqiu")
        .then(({ data }) => {
          console.log(data);
          this.message = data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadmes2() {
      this.axios
        .post("Ball/lanqiu")
        .then(({ data }) => {
          console.log(data);
          this.message = data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadmes3() {
      this.axios
        .post("News/index")
        .then(({ data }) => {
          console.log(data);
          this.message = data.news;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    recommes(id, uid, money) {
      // if (parseInt(this.status) === 3) {
      //   this.$router.push({name: "expertrecommend",query: { id: id, status: 0 }});
      // } else {
      if (money == "已购买"||money == "0") {
        if (parseInt(this.status) === 3) {
          this.$router.push({
            name: "expertrecommend",
            query: { id: id, status: 0 }
          });
        } else {
          this.$router.push({
            name: "expertrecommend",
            query: { id: id, status: 2 }
          });
        }
      } else {
        this.$bus.$emit("comAlert", {
          title: "支付确认",
          info: "你需要支付" + money + "元",
          button: [
            {
              text: "确认",
              callback: () => {
                this.axios
                  .post("Ball/zhifu", {
                    money: money,
                    id: id
                  })
                  .then(({ data }) => {
                    console.log(data);
                    if (data.status === 1) {
                      this.$bus.$emit("toast", "购买成功");
                      if (parseInt(this.status) === 3) {
                        this.$router.push({
                          name: "expertrecommend",
                          query: { id: id, status: 0 }
                        });
                      } else {
                        this.$router.push({
                          name: "expertrecommend",
                          query: { id: id, status: 2 }
                        });
                      }
                    } else if (data.status === 2) {
                      this.$bus.$emit("toast", "积分不足，请充值");
                      this.$router.push("userCenter");
                    }
                  });
                // .catch(function (error) {
                //   console.log(error);
                // });
              }
            },
            {
              text: "取消",
              callback: () => {}
            }
          ]
        });
        // }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#gamelist {
  min-width: 320px;
  padding-top: 67px;
  background-color: #f4f4f4;
  .gamelist {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 0 50px 0 30px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .gametop {
      padding: 24px 0 24px 36px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 100%;
        }
        .box1 {
          width: 80px;
          height: 80px;
          border-radius: 40px;
          overflow: hidden;
        }
        .box2 {
          margin-left: 15px;
        }
        .box3 {
          margin-left: 15px;
          background-color: #fd9e58;
          color: #fff;
          padding: 0 5px;
          height: 36px;
          border-radius: 8px;
          font-size: 22px;
          text-align: center;
          line-height: 40px;
        }
      }
      .right {
        margin-left: 15px;
        font-size: 24px;
        text-align: center;
        line-height: 36px;
        border-radius: 8px;
        border: 2px solid #f25b5b;
        padding: 5px 15px;
        color: #f25b5b;
      }
    }
    .gamecenter {
      color: rgb(88, 88, 88);
      font-size: 24px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .title {
      line-height: 60px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .gamecon {
      font-size: 28px;
      font-weight: 700;
      color: rgb(82, 81, 81);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box1 span {
        color: #f25b5b;
      }
      .box2 {
        font-size: 40px;
      }
    }
  }
}
</style>
